import {
  type UserConfig,
  defineConfig,
  presetIcons,
  presetUno,
  transformerDirectives,
} from 'unocss'

export default defineConfig({
  presets: [
    presetUno(), // default
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
  ],
  shortcuts: {
    'flex-center': 'flex justify-center items-center',
    'flex-between': 'flex justify-between items-center',
  },
  theme: {
    colors: {
      primary: '#409EFF',
      white: '#fff',
      black: '#303133',
      info: '#909399',
      success: '#67C23A',
      delete: '#F56C6C',
      warn: '#E6A23C',
    },
  },
  rules: [
    // font-size
    [/^fonts-(\d+)$/, ([,d]) => ({ 'font-size': `${d}px` })],
    // font-weight
    [/^fontw-(\d+)$/, ([,d]) => ({ 'font-weight': `${d}` })],
    // text-color
    [/^text-(.*)$/, ([, c], { theme }: { theme: { colors: string[] } }) => {
      if (theme.colors[c])
        return { color: theme.colors[c] }
    }],
    // background color
    [/^bg-(.*)$/, ([, c], { theme }: { theme: { colors: string[] } }) => {
      if (theme.colors[c])
        return { background: theme.colors[c] }
    }],
  ],

  transformers: [
    transformerDirectives(), // .custom-div { @apply text-center my-0 font-medium; }
  ],
} as UserConfig,
)